<template>
  <div class="module-container">
    <ModuleHeader
      title="流动性及利差"
    />

    <div class="charts-grid">
      <!-- 左侧图表：利率相关 -->
      <LiquidityChart
        :series="liquidityChartSeries"
        :height="300"
        :y-axis-range="[0, 4]"
      />

      <!-- 右侧图表：利差相关 -->
      <LiquidityChart
        title="信用利差"
        :series="spreadChartSeries"
        :height="300"
        :y-axis-range="[0, 4]"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import LiquidityChart from './LiquidityChart.vue'
import ModuleHeader from '../common/ModuleHeader.vue'
import { useLiquidityData } from '../hooks/useLiquidityData'

const { liquidityData, spreadData } = useLiquidityData()

// 流动性图表数据
const liquidityChartSeries = computed(() => [
  liquidityData.value.excessReserveRatio,
  liquidityData.value.dr007,
  liquidityData.value.governmentBond1Y,
  liquidityData.value.shibor6Y,
  liquidityData.value.lpr1Y
])

// 利差图表数据
const spreadChartSeries = computed(() => [
  spreadData.value.corporateBondAAvsAAA,
  spreadData.value.corporateBondAAvsGov,
  spreadData.value.urbanInvestmentAAvsAAA
])
</script>

<style scoped>
.module-container {
  @apply bg-white rounded-[4px] shadow-sm mb-6 overflow-hidden;
  border: 1px solid #D4D8E5;
}

.charts-grid {
  @apply grid grid-cols-1 lg:grid-cols-2 gap-6 p-6;
}
</style>
